<template>
  <div style="width: 100vw;overflow: hidden" class="page-wrap">
    <div class="page">
      <PublicHeader></PublicHeader>
      <PublicNav></PublicNav>
      <div class="header-data">
        <div style="float: left">
          <div class="data-bg">
            <span>设备数据</span>
            <b>654</b>
          </div>
          <div class="data-bg">
            <span>设备数据</span>
            <b>654</b>
          </div>
        </div>
        <div style="float: right">
          <div class="data-bg">
            <span>设备数据</span>
            <b>654</b>
          </div>
          <div class="data-bg">
            <span>设备数据</span>
            <b>654</b>
          </div>
        </div>
      </div>
      <div id="container"></div>
      <div class="left-top">
        <div class="title">
          <i></i>
          <span>设备信息</span>
        </div>
        <div class="total">
          <img src="../assets/img/title-bg.png" alt="" />
          <p>
            <span>设备总数</span>
            <span>256</span>
          </p>
          <div class="total-data">
            <b>设备数据</b>
            <p>数据信息：SHUJU</p>
            <p>数据信息：SHUJU</p>
            <p>数据信息：SHUJU</p>
            <p>数据信息：SHUJU</p>
            <p>数据信息：SHUJU</p>
          </div>
        </div>
      </div>
      <div class="bar-chart">
        <div class="title">
          <i></i>
          <span>设备数据</span>
        </div>
        <BarChart></BarChart>
      </div>
      <div class="right">
        <div class="title">
          <i></i>
          <span>报警信息</span>
        </div>
        <div class="line-chart">
          <div class="secondary-title">
            <i></i>
            <span>报警数据状况</span>
          </div>
          <LineChart></LineChart>
        </div>
        <div class="pie-chart">
          <div class="secondary-title">
            <i></i>
            <span>报警状况分布</span>
          </div>
          <PieChart></PieChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import PublicHeader from '@/components/PublicHeader';
    import PublicNav from '@/components/PublicNav';
    import BarChart from '@/components/BarChart';
    import LineChart from '@/components/LineChart';
    import PieChart from '@/components/PieChart';
    export default {
        name: "home",
        components: {PublicHeader, BarChart, PublicNav, LineChart, PieChart},
        data() {
            return {
            }
        },
        methods: {},
        mounted() {
            //初始化地图对象，加载地图
            var map = new AMap.Map("container", {resizeEnable: true, viewMode: '3D'});
            var lnglats = [
                [116.382122, 39.921176],
                [116.368904, 39.923423],
                [116.387271, 39.922501],
                [116.398258, 39.914600]
            ];
            let icon = require('../assets/img/marker.png')
            var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
            for (var i = 0, marker; i < lnglats.length; i++) {
                var marker = new AMap.Marker({
                    position: lnglats[i],
                    map: map,
                    icon:new AMap.Icon({
                        size:new AMap.Size(37,48),
                        image:icon
                    }),
                    offset: new AMap.Pixel(-18, -8)
                });
                let img = require('../assets/img/alarm.png')
                marker.content = '<div class="pixel">' +
                    '<small></small>' +
                    '<i></i>' +
                    '<p>标识桩编号：BH56236523</p>' +
                    '<p>标识桩位置：天潼路158号-01</p>' +
                    '<div class="status">' +
                    '<span>标识桩状态：</span>' +
                    '<div class="high-light">' +
                    '<img src="'+img+'" alt=""/>' +
                    '<span>报警</span>' +
                    '</div>' +
                    '</div>' +
                    '<p>储能电池电量状态：' +
                    '<span class="green">80%</span>' +
                    '</p>' +
                    '<p>4G卡号：15320320125</p>' +
                    '</div>';
                marker.on('click', markerClick);
                marker.emit('click', {target: marker});
            }
            function markerClick(e) {
                infoWindow.setContent(e.target.content);
                infoWindow.open(map, e.target.getPosition());
            }
            map.setFitView();

            /*屏幕适配*/
            var cliWidth = window.innerWidth;
            document.getElementsByClassName('page')[0].style.transform = `scale(${cliWidth / 1920})`;
            document.getElementsByClassName('page-wrap')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
            document.getElementsByTagName('html')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
            document.getElementsByTagName('body')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
            document.getElementById('app').style.height = `${1080 * (cliWidth / 1920)}px`;
            window.onresize = function () {
                var cliWidth = window.innerWidth;
                document.getElementsByClassName('page')[0].style.transform = `scale(${cliWidth / 1920})`;
                document.getElementsByClassName('page-wrap')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
                document.getElementsByTagName('html')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
                document.getElementsByTagName('body')[0].style.height = `${1080 * (cliWidth / 1920)}px`;
                document.getElementById('app').style.height = `${1080 * (cliWidth / 1920)}px`;
            };
        }
    }
</script>

<style lang="scss">
    .header-data{
      width: 1246px;
      position: absolute;
      z-index: 100;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: 150px;
      overflow: hidden;
      &>div{
        display: flex;
        align-items: center;
      }
      .data-bg{
        width: 170px;
        height: 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("../assets/img/data-bg.png")no-repeat center;
        background-size: contain;
        margin-right: 20px;
        &:nth-of-type(2){
          margin-right: 0;
        }
        span{
          color:#ffffff;
          font-size: 16px;
        }
        b{
          color:#1df9fc;
          font-size: 20px;
          margin-left: 10px;
        }
      }
    }
    .page {
        background-image: url("~@/assets/img/bg.png");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 1920px;
        height: 1080px;
        background-color: rgb(5, 19, 50);
        transform-origin: left top;
        position: relative;
        &:after{
          width: 100%;
          height: 100%;
          background-image: url("~@/assets/img/shadow.png");
          background-position: top center;
          background-repeat: no-repeat;
          transform-origin: left top;
          background-size: 100%;
          position: absolute;
          left: 0;
          top: 0;
          pointer-events: none;
          display: block;
          content:'';
        }
        .title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            line-height: 44px;
            margin-left: 30px;

            i{
                width: 7px;
                height: 7px;
                display: block;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                background: #29f2ff;
                margin-right: 10px;
            }
            span{
                background-image: -webkit-linear-gradient(top,#93f2f7,#68bedd,#53b2f7);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        .right{
            position: absolute;
            right: 20px;
            top: 90px;
            width: 318px;
            height: 782px;
            background-image: url("~@/assets/img/right-bg.png");
            background-repeat: no-repeat;
            background-position: top left;
            background-size: contain;
            z-index: 2;
            .secondary-title{
                display: flex;
                align-items: center;
                line-height: 55px;
                margin-left: 32px;
                margin-top: 10px;
                i{
                    display: block;
                    background-image: -webkit-linear-gradient(top,#00d0ff,#14b1fc,#3381f8);
                    width: 4px;
                    height: 18px;
                    margin-right: 8px;
                }
                span{
                    background-image: -webkit-linear-gradient(top,#97faff,#73cfee,#56b0e4);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    font-weight: bolder;
                    font-size: 16px;
                }
            }
            .line-chart{
                #line-chart-main{
                    width: 97%;
                    height: 280px;
                    margin-left:15px;
                }
            }
            .pie-chart{
                #pie-chart-main{
                    width: 97%;
                    height: 400px;
                    margin-left:20px;
                }
            }
        }
        .left-top{
            position: absolute;
            left: 0;
            top: 90px;
            width: 317px;
            height: 380px;
            background-image: url("~@/assets/img/left-top.png");
            background-repeat: no-repeat;
            background-position: top left;
            background-size: contain;
            z-index: 2;
            .total{
                position: relative;
                &>p{
                    position: absolute;
                    left: 70px;
                    top: 6px;
                    display: flex;
                    align-items: center;
                    span{
                        &:nth-of-type(1){
                            font-size: 14px;
                            color:#fff;
                            margin-right: 14px;
                        }
                        &:nth-of-type(2){
                            font-size: 20px;
                            color:#35ffff;
                        }
                    }
                }
                .total-data{
                    position: absolute;
                    top: 80px;
                    left: 40px;
                    & > b{
                        display: block;
                        color:#fff;
                        font-size: 18px;
                    }
                    & > p{
                        color:#eaf5ff;
                        font-size: 14px;
                    }
                }
            }
        }
        .bar-chart{
          position: absolute;
          left: 0;
          bottom: 207px;
          width: 317px;
          height: 384px;
          background-image: url("~@/assets/img/left-bottom.png");
          background-repeat: no-repeat;
          background-position: top left;
          background-size: contain;
          z-index: 2;
          #bar-chart-main{
              margin-left: 24px;
              width: 310px;
              height: 350px;
          }
        }
        .amap-info-close{
            top: 8px;
            right: 8px!important;
        }
        .amap-info-content{
            overflow: inherit;
            box-shadow: none;
            background: transparent;
            padding: 0;
        }
        .amap-info-sharp{
            display: none;
        }
        #container {
            width: 1920px;
            height: 782px;
        }
        .pixel{
            background:#fff;
            border:2px solid #20a2ff;
            padding: 10px 20px;
            border-radius: 5px;
            width: 262px;
            &>i{
                width:0;
                height:0;
                border-width:17px 15px 0;
                border-style:solid;
                border-color:#fff transparent transparent;
                margin:0 auto;
                position:absolute;
                bottom: -15px;
                left: 50%;
                transform: translateX(-50%);
            }
            &>small{
                width:0;
                height:0;
                border-width:20px 18px 0;
                border-style:solid;
                border-color:#20a2ff transparent transparent;
                margin:0 auto;
                position:absolute;
                bottom: -18px;
                left: 50%;
                transform: translateX(-50%);
            }
            p{
                font-size: 14px;
                color:#181818;
                margin: 0;
                line-height: 30px;
                width: 262px;
                word-break: break-all;
            }
            .status{
                font-size: 14px;
                color:#181818;
                display: flex;
                align-items: center;
                line-height: 30px;
                .high-light{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img{
                        width: 15px;
                        margin-right: 6px;
                    }
                    span{
                        color:#ed5050;
                        padding-top: 3px;
                    }
                }
            }
            .green{
                color:#55cf83;
            }
        }
    }
</style>
